import React from 'react'
import { getBanner } from '../../../api/index'
import { Carousel, WhiteSpace, WingBlank } from 'antd-mobile';
import { getRecommendPlaylist } from '../../../api/index'
import { withRouter } from 'react-router-dom'
require('./container.css')
class Container extends React.Component {
    constructor() {
        super()
        this.state = {
            recommendPlayList: [],
            banners: [],
            imgHeight: 160,
        }
    }
    //获取banner图
    getBannerPicture() {
        getBanner().then((res) => {
            this.setState({
                banners: res.data.banners
            })
        })
    }
    //获取推荐歌单
    getRecommendPlaylistID(id) {
        getRecommendPlaylist(id).then((res) => {
            this.setState({
                recommendPlayList: res.data.playlists
            })
        })
    }
    componentWillMount() {
        this.getRecommendPlaylistID()
        this.getBannerPicture()
    }
    render() {
        let { recommendPlayList, banners } = this.state
        let recommendlist = recommendPlayList.map(({ id, name, coverImgUrl, creator }) => {
            return (
                <li className="recommendSongList" key={id} onClick={() => {
                    //跳转时传递每个歌单的id
                    this.props.history.push('/recommendPlayList', id)
                }}>
                    <img src={coverImgUrl} alt="图片" className="recommendSongImgList" />
                    <div className="recommendSongListDetil">
                        <h1 className="recommendSongListTitle" style={{ color: "#fff" }}>{name}</h1>
                        <p className="recommendSongCreaTor" >{creator.nickname}</p>
                    </div>
                </li>
            )
        })
        return (
            <div className="HotSonglist">
                {/* 轮播图 */}
                <div className="slideshow" >
                    <WingBlank>
                        <WhiteSpace />
                        <Carousel className="space-carousel"
                            autoplay={true}
                            infinite
                        >
                            {banners.map(({bannerId, pic}) => (
                                <a
                                    key={bannerId}
                                    style={{ display: 'block', width: '100%', height: this.state.imgHeight }}
                                >
                                    <img
                                        src={pic}
                                        alt=""
                                        style={{ width: '100%', height: '100%', verticalAlign: 'top' }}
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event('resize'));
                                            this.setState({ imgHeight: 'auto' });
                                        }}
                                    />
                                </a>
                            ))}
                        </Carousel>
                    </WingBlank>
                </div>
                {/* 热门歌单推荐*/}
                <div className="hot">热门歌单推荐</div>
                <div className="recommendPlayList">
                    <ul className="recommendShow">
                        {recommendlist}
                    </ul>
                </div>
            </div>
        );
    }
}
export default withRouter(Container)